<template>
  <el-select
    :disabled="disabled"
    :placeholder="`${$language.local('请选择')}${$language.local(labelKey)}`"
    :size="size"
    @change="selectChange"
    @visible-change="getConfigeOptions"
    class="el-select"
    clearable
    filterable
    v-loadmore="loadMore"
    v-model="selectId"
  >
    <slot
      :options="options"
      name="options"
    >
      <el-option
        :key="item[labelKey]"
        :label="item[labelKey]"
        :value="getId(item)"
        v-for="item in options"
      ></el-option>
    </slot>
  </el-select>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    valueKey: String,
    labelKey: String,
    apiName: String,
    sid: Number,
    query: Object,
    model: Array,
    disabled: Boolean,
    size: String,
  },
  data() {
    return {
      selectId: this.value,
      options: this.model || [],
      total: null,
      loading: false,
      queryInfo: {
        page: 1,
        pageSize: 10,
        keywords: "",
        ...this.query,
      },
      staticVisible: false,
    };
  },

  async mounted() {
    // this.selectId = this.value;
    // console.log(this.options);

    await this.getConfigeOptions(true);
    // this.getOptions();
    //    console.log(this.value);

    if (this.value) {
      if (this.options.length === 0) {
        console.log(this.options);
        return;
      }
      let id = this.getId(this.options[0]);
      if (typeof id === "string") {
        this.selectId = this.value.toString();
      } else {
        this.selectId = Number(this.value);
      }
    }
  },
  watch: {
    value(newValue) {
      this.selectId = newValue;

      if (newValue) {
        this.selectChange(newValue);
      }
    },
    model(newValue) {
      // console.log(newValue);
      this.options = newValue;
    },
    query: {
      handler() {
        this.queryInfo = { ...this.queryInfo, page: 1, ...this.query };
      },
    },
    apiName() {
      // this.apiName = newValue;
      // console.log(this.apiName);
      this.getOptions(null, true);
    },
  },
  computed: {
    maxPage: function () {
      return Math.ceil(this.total / this.queryInfo.pageSize);
    },
  },
  methods: {
    getId(item) {
      if (this.valueKey) {
        return item[this.valueKey];
      }
      return item.id || item.Id || item.ID || item.BANKNAME;
    },
    async getConfigeOptions(visible) {
      if (!visible) {
        return;
      }

      if (this.model) {
        this.options = this.model;
        return;
      }
      if (!this.staticVisible && this.apiName) {
        this.staticVisible = true;
        await this.getOptions();
      }
    },
    async getOptions(query, isNewList) {
      // console.log(this.apiName);
      if (query) {
        this.queryInfo.keywords = query;
      }
      if (this.sid) {
        this.queryInfo.sid = this.sid;
      }
      let response = await this.$http.get(this.apiName, this.queryInfo);
      this.total = response.TotalCount;
      this.options = isNewList
        ? response.data.Data
        : this.options.concat(response.data.Data);
      if (this.selectId) {
        this.selectChange(this.selectId);
      } else if (this.options.length === 1) {
        this.selectId = this.getId(this.options[0]);
        this.$emit("input", this.selectId);
        this.$emit("change", this.options[0]);
      }
    },
    async loadMore() {
      if (this.queryInfo.page >= this.maxPage) {
        return;
      }
      this.queryInfo.page++;
      this.loading = true;
      await this.getOptions();
      this.loading = false;
    },
    selectChange(e) {
      let selectItem = this.options.find((v) => {
        let id = this.getId(v);
        return id === e;
      });
      this.$emit("input", e);
      this.$emit("change", selectItem);
    },
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
